import './index.scss'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/parallax'
import SvgIcon from '@/components/SvgIcon'
import { Outlet, useMatch } from 'react-router-dom'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Parallax } from 'swiper/modules'
function Index() {
  const march = useMatch('/')

  return (
    <div className="Index">
      {march && (
        <Swiper
          className="mySwiper"
          speed={600}
          parallax={true}
          pagination={{ clickable: true }}
          navigation={{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }}
          modules={[Navigation, Pagination, Parallax]}
        >
          <div
            className="parallax-bg"
            style={{ backgroundImage: "url('/assets/images/swiper2.jpg')" }}
            data-swiper-parallax="-23%"
          ></div>
          <SwiperSlide>
            <div className="mask">
              <div className="mask-top">
                <div className="title" data-swiper-parallax="-400">
                  引领未来的评估技术
                </div>
                <div className="subtitle" data-swiper-parallax="-200">
                  智能知识追踪与评估
                </div>
                <div className="text" data-swiper-parallax="-100">
                  <p>
                    我们的系统采用尖端的深度学习技术，通过精准评估学生的学习状态，实现了个性化的知识追踪。系统能够动态更新学生的能力参数，并提供定制化的学习体验与即时反馈。
                  </p>
                </div>
              </div>
              <div className="mask-bottom"></div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="mask">
              <div className="mask-top">
                <div className="title" data-swiper-parallax="-300">
                  互动学习的革新
                </div>
                <div className="subtitle" data-swiper-parallax="-200">
                  自然语言处理与智能辅导
                </div>
                <div className="text" data-swiper-parallax="-100">
                  <p>
                    系统融合了先进自然语言处理技术，不仅理解学生的语言输入，还能提供智能化的辅导服务。通过语义理解和情感分析，系统模拟真实教学场景，提供个性化的学习建议和情感支持。
                  </p>
                </div>
              </div>
              <div className="mask-bottom"></div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="mask">
              <div className="mask-top">
                <div className="title" data-swiper-parallax="-300">
                  数据驱动的教育洞察
                </div>
                <div className="subtitle" data-swiper-parallax="-200">
                  大数据分析与学习优化
                </div>
                <div className="text" data-swiper-parallax="-100">
                  <p>
                    我们的系统利用大数据分析技术，深入分析学生的学习数据，揭示潜在的学习模式和改进点。结合预测建模，系统可以提前识别学生的学习风险，并提供预防措施，确保学习路径的最优化。
                  </p>
                </div>
              </div>
              <div className="mask-bottom"></div>
            </div>
          </SwiperSlide>
          <div className="swiper-button-next"></div>
          <div className="swiper-button-prev"></div>
          <div className="swiper-pagination"></div>
        </Swiper>
      )}
      <div className="content">
        <div className="l"></div>
        <div className="c">
          <Outlet />
        </div>
        <div className="r"></div>
      </div>
      <div className="footer">
        <div className="footer-main">
          <div className="footerMain-col">
            <div className="fmc-title">公司信息</div>
            <div className="fmc-content">
              <a href="/main">为什么选择我们</a>
              <a href="/main">我们的特色</a>
              <a href="/main">我们的案例</a>
              <a href="/main">关于我们</a>
              <a href="/main">博客与新闻</a>
              <a href="/main">联系我们</a>
            </div>
          </div>
          <div className="footerMain-col">
            <div className="fmc-title">快速连接</div>
            <div className="fmc-content">
              <a href="/main">关于我们</a>
              <a href="/main">联系我们</a>
              <a href="/main">隐私政策</a>
              <a href="/main">条款与条件</a>
              <a href="/main">博客与新闻</a>
              <a href="/main">我们的团队</a>
            </div>
          </div>
          <div className="footerMain-col">
            <div className="fmc-title">服务项目</div>
            <div className="fmc-content">
              <a href="/main">所有服务</a>
              <a href="/main">促销邮件</a>
              <a href="/main">产品更新</a>
              <a href="/main">邮件营销</a>
              <a href="/main">获取客户邮件</a>
              <a href="/main">保留客户邮件</a>
            </div>
          </div>
          <div className="footerMain-col">
            <div className="fmc-title">联系信息</div>
            <div className="fmc-content">
              <a href="/main">
                <SvgIcon name="email" color="#fff" size="20" />
                <span>1799080473@qq.com</span>
              </a>
              <a href="/main">
                <SvgIcon name="phone" size="20" />
                <span>17727422202</span>
              </a>
              <div className="fmcc-icon">
                <SvgIcon name="skip" size="30" />
                <a href="https://im.qq.com/">
                  <SvgIcon name="qq" size="30" />
                </a>
                <a href="https://weixin.qq.com/">
                  <SvgIcon name="wechat" size="30" />
                </a>
                <a href="https://weibo.com/">
                  <SvgIcon name="microblog" size="30" />
                </a>
                <a href="https://www.douyin.com/">
                  <SvgIcon name="tikTok" size="30" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
